<!-- 展业记录 -->
<template>
	<view class="exh-records-box">
		<view class="exh-records-filter">
			<view class="add-btn" @tap="addFun">
				<image class="exh-records-filter-img" src="/static/main/xinzeng.png"></image>
				<text>新增</text>
			</view>
		</view>
		<view class="exh-records-table">
			<view class="exh-records-thead">
				<view class="exh-records-th text-l w40">
					<view>访问日期</view>
				</view>
				<view class="exh-records-th text-l w40">
					<view>记录摘要</view>
				</view>
			</view>
			<view class="exh-records-tr-box" v-for="tr in tableList" :key="tr.id">
				<view class="exh-records-tr" :class="">
					<view class="exh-records-td text-l w40">
						{{tr.date}}
					</view>
					<view class="exh-records-td text-l w40" @tap="toDetail(tr)">
						<view class="text-over-hide">{{tr.remark}}</view>
						<view class="text-over-hide-icon"><uni-icons type="right" size="12"></uni-icons></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList: [{
						id: '001',
						date: '2024-06-22',
						remark: '客户不在家，与其业务经理张三进行了初步的沟通，初步达成合作意向。'
					},
					{
						id: '002',
						date: '2024-06-22',
						remark: '客户不在家，与其业务经理张三进行了初步的沟通，初步达成合作意向。'
					},
					{
						id: '003',
						date: '2024-06-22',
						remark: '客户不在家，与其业务经理张三进行了初步的沟通，初步达成合作意向。'
					},
					{
						id: '004',
						date: '2024-06-22',
						remark: '客户不在家，与其业务经理张三进行了初步的沟通，初步达成合作意向。'
					},
					{
						id: '005',
						date: '2024-06-22',
						remark: '客户不在家，与其业务经理张三进行了初步的沟通，初步达成合作意向。'
					}
				]
			}
		},
		methods: {
			addFun() {
				uni.navigateTo({
					url: '/pages/oms/ExhBackups'
				});
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/oms/exhDetails'
				});
			}
		}
	}
</script>

<style>
	.exh-records-box {
		width: 100%;
		height: 100%;
		background-color: #F8F9Fc;
		padding: 24rpx 0;
		box-sizing: border-box;
	}


	.exh-records-filter {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
	}

	.add-btn {
		height: 88rpx;
		width: 130rpx;
		display: flex;
		align-items: center;
		margin-left: 50rpx;
	}

	.exh-records-filter-img {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.exh-records-table {
		margin: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 45rpx 110rpx 20rpx;
		box-sizing: border-box;
	}

	.exh-records-thead {
		height: 80rpx;
		line-height: 80rpx;
		/* padding: 20rpx 0; */
		border-bottom: solid 1rpx #EFEFEF;
		display: flex;
		flex-direction: row;
		text-align: center;
	}

	.exh-records-tr-box {
		border-bottom: solid 1rpx #EFEFEF;
	}

	/* 
	.exh-records-tr-box:last-child {
		border: none;
	} */

	.exh-records-tr {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		text-align: center;
	}


	.exh-records-th {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		font-weight: 400;
	}

	.exh-records-td {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #333333;
		font-weight: 400;
	}

	.w40 {
		flex: 1
	}

	.text-over-hide {
		width: 150rpx;
		display: inline-block;
		overflow: hidden; // 超出的文本隐藏
		text-overflow: ellipsis; // 溢出用省略号显示
		white-space: nowrap; // 溢出不换行
	}

	.text-over-hide-icon {
		display: inline-block;
		overflow: hidden; // 超出的文本隐藏
	}
</style>